<template>
  <div class="flow-attr">
    <el-form label-position="left" class="flow-config-attr" label-width="100px">
      <el-form-item label="节点类型">
        <el-tag>{{ getNodeLabel(_value.type) }}</el-tag>
      </el-form-item>
      <el-form-item label="节点编号">
        <el-input v-model="_value.code" class="input-attr" disabled />
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input v-model="_value.name" class="input-attr" placeholder="请输入节点名称" />
      </el-form-item>

      <template v-if="_value.type === 'Job' && _value.props.tasks">
        <div>
          <el-form-item label="多人审批方式">
            <el-select v-model="_value.props.approveMethod" class="input-attr">
              <el-option
                v-for="item in DIC_PROP.APPROVE_METHOD"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </template>

      <template v-if="validateNode">
        <el-form-item label="抄送人">
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleUserPickerShow()"
          >
            选择人员
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in _value.props.carbonCopyList"
              :key="tag.id"
              closable
              type="primary"
              @close="_value.props.carbonCopyList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
          <el-tooltip placement="top" content="将审批结果通知给抄送人">
            <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
          </el-tooltip>
        </el-form-item>
      </template>

      <template v-if="_value.type === 'Job'">
        <el-form-item label="相同审批人">
          <el-switch
            v-model="_value.props.isPassSame"
            active-value="1"
            inactive-value="0"
            inactive-text="不自动通过"
            active-text="自动通过"
          />
        </el-form-item>
        <el-form-item label="被驳回后">
          <el-switch
            v-model="_value.props.rejectType"
            active-value="1"
            inactive-value="0"
            inactive-text="审批时依次审批"
            active-text="审批时直接跳转到驳回节点"
          />
          <el-tooltip
            placement="top"
            content="表示被驳回后的节点再次审批时，需要再次经历途中节点【依次返回】到原驳回的节点，还是【直接返回】到原驳回的节点"
          >
            <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="表单模式">
          <el-radio-group v-model="_value.props.formMode">
            <el-radio value="normal" label="编辑模式" />
            <el-radio value="read" label="只读模式" />
            <el-radio value="disable" label="禁用模式" />
          </el-radio-group>
        </el-form-item>
      </template>

      <template v-if="_value.type === 'Job' || _value.type === 'Start'">
        <el-form-item label="自动审批">
          <el-switch
            v-model="_value.props.isAutoAudit"
            active-value="1"
            inactive-value="0"
            inactive-text="否"
            active-text="是"
            @change="hideJobFormPerms"
          />
        </el-form-item>
        <el-form-item label="节点时限">
          <el-input-number
            v-model="_value.props.timeout"
            class="input-attr"
            placeholder="小于0则不限制"
          />
        </el-form-item>
        <el-form-item label="节点排序">
          <el-input-number v-model="_value.props.sort" class="input-attr" />
        </el-form-item>
      </template>
    </el-form>
    <OrgUserPicker ref="userPickerRef" multiple type="user" @ok="handleUserPickerConfirm" />
  </div>
</template>
<script setup lang="ts">
import type { FlowModelNode } from "../../ProcessDef";
import { DIC_PROP, filterDictLabel } from "../../ProcessDict";
import OrgUserPicker from "../../../OrgUserPicker.vue";
import { ref } from "vue";

const _value = defineModel<FlowModelNode>();
const userPickerRef = ref(null);

const getNodeLabel = nodeType => {
  const opDesc = filterDictLabel(DIC_PROP.NODE_TYPE_DESC, nodeType);
  return opDesc;
};

const handleUserPickerShow = () => {
  userPickerRef.value.show();
};

function handleUserPickerConfirm(users) {
  _value.value.props.carbonCopyList = users;
}

const validateNode = () => {
  return true;
};

const hideJobFormPerms = () => {};
</script>
<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
</style>
